<template>
  <div class="url-picture-upload">
    <a-input-group compact style="margin-bottom: 16px">
      <a-input
        class="form-input"
        v-model:value="fileUrl"
        style="width: calc(100% - 120px)"
        placeholder="请输入图片 URL"
      />
      <a-button
        type="primary"
        :loading="loading"
        @click="handleUploadChange"
        style="width: 120px"
      >
        提交
      </a-button>
    </a-input-group>
    <!-- 图片预览区域：独立容器，优化展示 -->
    <div class="img-preview-container">
      <div class="url-img-wrapper" v-if="picture?.url">
        <img
          :src="picture?.url"
          alt="URL上传图片预览"
          class="url-preview-img"
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
// 引入URL上传接口
import { uploadPictureByUrlUsingPost } from '@/api/pictureController';

// 父组件传递的参数类型定义
interface Props {
  // 当前图片信息（用于回显或编辑）
  picture?: API.PictureVO | null;
  // 当前空间ID
  spaceId?: number;
  // 上传成功后的回调函数
  onSuccess?: (newPicture: API.PictureVO) => void;
}

// 接收父组件传递的参数
const props = defineProps<Props>();

// 用户输入的图片URL
const fileUrl = ref<string>('');
// 上传加载状态（防止重复提交）
const loading = ref<boolean>(false);

// 处理URL上传逻辑
const handleUploadChange = async () => {
  // 验证URL是否为空
  if (!fileUrl.value) {
    message.warning('请输入图片URL');
    return;
  }
  // 开始上传，设置加载状态
  loading.value = true;

  try {
    // 准备上传参数（包含可能的编辑ID）
    const params: API.PictureUploadDTO = { fileUrl: fileUrl.value };
    if (props.picture) {
      params.id = props.picture.id;
      // 上传时传递 spaceId
      params.spaceId = props.spaceId
    }

    // 调用接口上传图片
    const res = await uploadPictureByUrlUsingPost(params);

    // 处理接口返回结果
    if (res.data?.code === 0 && res.data?.data) {
      message.success('URL上传成功');
      // 调用父组件的成功回调，传递新图片信息
      props.onSuccess?.(res.data.data);
      // 清空输入框
      fileUrl.value = '';
    } else {
      message.error(`上传失败: ${res.data?.message || '未知错误'}`);
    }
  } catch (e) {
    console.error('URL上传异常:', e);
    message.error('上传失败，请重试');
  } finally {
    // 无论成功失败，都结束加载状态
    loading.value = false;
  }
};
</script>

<style scoped>
/* URL上传组件容器 */
.url-picture-upload {
  background-color: #f9fafb;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

/* 输入框样式（继承父组件表单风格） */
.form-input {
  border-radius: 6px !important;
  border-color: #e5e7eb !important;
  transition: all 0.2s ease !important;
  text-align: left;
}

.form-input:focus {
  border-color: #4caf50 !important;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1) !important;
}

/* 图片预览容器 - 让图片展示更合理 */
.img-preview-container {
  width: 100%;
  margin-top: 16px;
}

/* URL上传图片的专用容器 */
.url-img-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* URL预览图片样式，放大展示区域 */
.url-preview-img {
  max-width: 100%;
  max-height: 300px; /* 可根据需求调整，让图片有足够展示空间 */
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

/* 提交按钮样式微调（与整体风格统一） */
:deep(.ant-btn-primary) {
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

:deep(.ant-btn-primary:hover) {
  background-color: #3d9140 !important;
  border-color: #3d9140 !important;
}

:deep(.ant-btn-primary:disabled) {
  background-color: #a5d6a7 !important;
  border-color: #a5d6a7 !important;
}
</style>
